import React from 'react';
import { connect } from 'dva';
import router from "umi/router";
import { Form, Checkbox } from 'antd';
import { UserAddOutlined } from '@ant-design/icons';
import { Icon, NavBar, Toast, WingBlank } from 'antd-mobile';
import UsersTags from "components/usersTags/UsersTags";
import { RawAddSignForm } from 'components/flowdataDetail/AddSignForm';
import PhonePersonPicker from 'components/formily/components/PhonePersonPicker';
import _mixin from 'lodash/mixin';
import FlowHandleBaseFormPhoneMixin, { defaultPropsMixin, styles } from '../components/FlowHandleBaseFormPhoneMixin';

const customRender = (tagClose, v, onShow) => {
  return (
    <WingBlank className={[styles.container, 'dynamic-theme'].join(' ')}>
      <div className={styles.header}>
        <span className={[styles.title, 'dynamic-color'].join(' ')}>添加加签人</span>
        <UserAddOutlined onClick={onShow} /> 
      </div>
      {v && v.length > 0 ? v.map((item) => {
        const { props } = item;
        return (
          <UsersTags
            key={`${item.key}`}
            label={props.title}
            onClick={() => tagClose(item)}
          />
        );
      }) : '未选择任何人员'}
    </WingBlank>
  );
}

@connect(
  ({ notice_msg: noticeModel }) => ({
    noticeThemeTypeList: noticeModel.noticeThemeTypeList,
  }),
  (dispatch) => ({
    dispatch,
    loadMessageTheme: (type, noticeThemeCode) => dispatch({
      type: 'notice_msg/getNoticeTheme',
      payload: {
        type,
        noticeThemCode: noticeThemeCode,
      },
    }),
  }),
)
@Form.create()
class AddSignFormPhone extends RawAddSignForm {

  constructor(props) {
    super(props);
    _mixin(this, FlowHandleBaseFormPhoneMixin);

    this.state = {
      ...this.state,
      modalVisible: false,
    };
  }

  handlePhoneOk() {
    Toast.loading('加载中', 0);
    this.handleOk();
  }

  render() {

    const { disabled, checkedNodes } = this.state;
    const { form } = this.props;
    const { getFieldDecorator } = form;

    // 通知用户不显示左边选中的用户
    const customUsers = this.getCustomNoticeUsers();

    const options = [
      { label: "发起人", value: "publisher" },
      // { label: "被加签人", value: "addSigner" },
    ];

    return (
      <div className={styles.root}>
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => router.goBack()}
          rightContent={[(
            <a
              key="ok"
              onClick={(e) => {
                e.preventDefault();
                this.handlePhoneOk();
              }}
            >
              确认
            </a>
          )]}
        >
          加签
        </NavBar>
        <PhonePersonPicker
          params={{
            params: {
              multiple: true,
            },
          }}
          value={checkedNodes}
          onChange={(values) => {
            const keys = [];
            const formatedItems = [];
            (values || []).forEach((i)=> {
              const { value, label } = i;
              keys.push(value);
              formatedItems.push({
                ...i,
                // for base class usage
                key: value,
                props: { title: label },
              });
            });
            this.checkTree(keys, formatedItems);
          }}
          customRender={(...args) => {
            return customRender(this.tagClose, ...args);
          }}
        />
        { this.renderNoticeSetting(
          '被加签人', 
          customUsers, 
          getFieldDecorator("user", {
            initialValue: ["publisher"] || null,
            rules: [],
          })(
            <Checkbox.Group
              options={options}
              // defaultValue={["publisher"]}
            />,
          ),
          disabled
        )}
      </div>
    );
  };
}

AddSignFormPhone.defaultProps = AddSignFormPhone.defaultProps || {}; 
_mixin(AddSignFormPhone.defaultProps, defaultPropsMixin);
export default AddSignFormPhone;
